<template>
  <div class="login-page">
    <el-card class="login-card">
      <h2 style="text-align: center">登录</h2>
      <el-form
        :model="form"
        ref="loginForm"
        @submit.prevent="handleLogin"
        label-width="80px"
      >
        <el-form-item label="用户名" prop="username">
          <el-input
            v-model="form.username"
            style="width: 240px"
            placeholder="请输入用户名"
            clearable
          />
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input
            v-model="form.password"
            style="width: 240px"
            type="password"
            placeholder="请输入密码"
            show-password
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleLogin">登录</el-button>
          <el-link @click="$router.push('/register')">没有账号？去注册</el-link>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { loginUser } from "../../api/api.js";

export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    async handleLogin() {
      try {
        // 登录请求
        const formData = new FormData();
        formData.append("username", this.form.username);
        formData.append("password", this.form.password);
        const response = await loginUser(formData);

        if (response.status === 200) {
          // 保存用户ID到localStorage
          const userId = response.data.user_id;
          this.$store.dispatch("login", { user_id: userId }); // 登录成功，保存用户ID到store
          // 其他组件中访问user_id的方法：const userId = this.$store.state.user_id;
          this.$message.success("登录成功！");
          this.$router.push("/user/photos"); // 跳转到主页
        }
      } catch (error) {
        // 获取错误消息
        const errorMessage =
          error.response?.data?.error || "登录失败，请稍后再试！";
        const errorStatus = error.response?.status;

        // 根据状态码进行判断，显示具体的错误信息
        if (errorStatus === 401) {
          // 密码错误
          this.$message.error("密码错误，请检查后重新输入。");
        } else if (errorStatus === 403) {
          // 账号被封禁
          this.$message.error("您的账号已被封禁，无法登录。");
        } else {
          // 其他错误（包括网络错误等）
          this.$message.error(errorMessage);
        }
      }
    },
  },
};
</script>

<style scoped>
.login-page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(
    135deg,
    #ff9a9e,
    #fad0c4,
    #fad0c4,
    #ff9a9e
  ); /* 马卡龙渐变色 */
  background-size: 400% 400%;
  animation: gradient-animation 2s ease infinite; /* 渐变动画 */
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.login-card {
  width: 350px;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  background: #fff;
}

.el-button {
  margin-top: 20px; /* 增加登录按钮与其他内容的间距 */
  padding: 12px;
  font-size: 16px;
}

.el-input {
  border-radius: 5px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.el-input:focus {
  box-shadow: 0 0 0 2px rgba(255, 201, 215, 0.7);
}

.el-link {
  display: block;
  text-align: center;
  margin-top: 20px; /* 增加“去注册”与按钮之间的距离 */
  color: #6c757d;
}

.el-link:hover {
  color: #007bff;
}

h2 {
  color: #6c757d;
}

.login-actions {
  display: flex;
  flex-direction: column;
  gap: 20px; /* 增加按钮和链接之间的间距 */
}
</style>
